<template>
    <div>
        <section class="container myLive">
            <h2 class="live">直播课程</h2>
            <div class="masking">
                <h3>研究生复试之高效准备简历的方法</h3>
                <p>
<!--                    <span class="iconfont icon-duigou"></span>&nbsp;&nbsp;-->
                    <span>直播结束</span>
                </p>
                <button>直播结束</button>
            </div>
            <div class="left">
                <div :class="item.courseId==courseid?'c':'d'" v-for="(item) in live" :key="item.courseId"><img :src="item.course.coverFileUrl" alt=""></div>
            </div>
            <div class="right">
                <div @mouseenter="show(item.courseId)" v-for="(item) in live" :key="item.courseId" :class="item.courseId==courseid?'borderGreen':'border'">
                    <router-link :to="{path:'/detail',query:{course:item.courseId}}" :class="item.courseId==courseid?'a':'b'">
                        <a-icon type="check-circle" style="margin-left: -30px"/>&nbsp;&nbsp;&nbsp;&nbsp;直播课程&nbsp;&nbsp;&nbsp;&nbsp;{{item.course.courseTitle}}
                    </router-link>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "Live",
        data() {
            return {
                live:[],
                courseid:'138'
            };
        },
       created() {
           this.$axios.post('http://wkt.myhope365.com/pc/liveCourseInfo/list',{number:4},).then(res=>{
               // console.log(res);
               this.live=res.data.rows;
               // console.log(this.live)
           }).catch(err=>{
               console.log(err);
           })
       },
        methods:{
            show(data){
                this.courseid=data
            }
        }
    }
</script>

<style scoped>
    /* 直播 */
    .live {
        margin-top: 50px;
        margin-bottom: 30px;
        text-align: center;
    }
    .myLive {
        margin: auto;
        /*margin-bottom: 50px;*/
        max-width: 1200px;
        min-width: 1200px;
        position: relative;
        padding: 0;
    }
    .myLive::after {
        content: "";
        display: block;
        clear: both;
    }
    .masking {
        position:absolute;
        top: 61px;
        left: 0;
        width: 50%;
        height: 350px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 80px 50px;
        text-align: center;
    }
    .masking>h3 {
        font-size: 24px;
        color: #f4f4f4;
        margin: 0;
    }
    .masking>p {
        margin: 35px 0;
    }
    .masking>button {
        outline: 0;
        border: 0;
        width: 180px;
        height: 50px;
        padding: 0 15px;
        font-size: 20px;
        line-height: 50px;
        background-color: #00cf8c;
    }
    .left,
    .right {
        float: left;
        width: 50%;
        height: 350px;
    }
    .left>div {
        height: 350px;
        /*display: none;*/
    }
    .left img {
        width: 100%;
        height: 100%;
    }
    .c {
        display: block;
    }
    .d {
        display: none;
    }
    .right {
        background-color: rgb(244, 244, 244);
    }
    .right>div {
        margin-left: 1px;
        height: 50px;
        text-indent: 2em;
        line-height: 50px;
        font-size: 16px;
    }
    .a {
        color: rgb(0,207,140);
    }
    .b {
        color: black;
    }
    .border {
        border-left: 5px solid rgb(244, 244, 244);
    }
    .borderGreen {
        border-left: 5px solid rgb(0,207,140);
    }

</style>
